昨天我們使用指令 docker run 起好 Docker 環境，再輸入指令在 docker 容器內執行 Playwright 測試，但每次都得重新輸入一長串指令似乎不那麼方便，因此，今天將介紹如何使用 Dockerfile，將所有設定寫進檔案裡，只要執行這份檔案建立出 image 後，不需輸入長長的指令，就能同樣在 Docker 容器內執行測試。

什麼是 Dockerfile？

Dockerfile 是一個文字檔，檔名就是 Dockerfile，在檔案內可以定義一系列指令，包含 Docker 環境建置、系統依賴、預設要執行的指令等等，透過 docker build 這個指令，Docker 就會依照定義好的指令依序執行，建立出一個新的 image (映像檔)。

Dockerfile 的優點

• 不須手動安裝套件：
  上一篇我們所有在 Docker 內執行的指令都能寫進 Dockerfile 內，這樣我們就不須在每次執行時還要一步步手動安裝套件。
• 保持高度一致性：
  團隊協作時，使用同一份 Dockerfile，能避免成員們指令不一致(依賴版本不同/系統不同等)所造成的測試不穩定。
• 方便管理：
  如果測試環境異動，只需要更改 Dockerfile，就能輕鬆更新每次執行環境，確保團隊成員使用一致的版本。

最小可執行 Dockerfile 配置

先在專案內建立 Dockerfile 檔案，並加入以下內容：

FROM mcr.microsoft.com/playwright:v1.55.1-jammy

WORKDIR /src

COPY package*.json ./

RUN npm ci
RUN npx playwright install

COPY . .

CMD ["npx", "playwright", "test"]

讓我們來依序了解這份檔案內的指令：

• FROM mcr.microsoft.com/playwright:v1.55.1-jammy
  以 Playwright 官方的 image 為基礎(地基)
• WORKDIR /src
  設定工作目錄，工作目錄名稱可自行取名
• COPY package*.json ./
  複製 package.json & package-lock.json
• RUN npm ci
  使用 package-lock.json 安裝相關套件
• RUN npx playwright install
  安裝 Playwright 的瀏覽器
• COPY . .
  複製測試程式碼
• CMD ["npx", "playwright", "test"]
  執行 Playwright 測試

產出 image (映像檔)

# docker build -t [名稱] .
docker build -t playwright-test .

執行上述指令，就能建立一個名為 playwright-test 的 image (映像檔)，接著透過 docker image ls 檢查是否有成功建立 image：

如果有開啟 Docker Desktop，也能看見剛剛建立的 image：

用建立好的 image 為環境執行測試

建立好 image 後，接著可以執行指令：

# docker run -t [名稱] .
docker run --rm playwright-test

就能順利地利用建立好的 image 執行 Playwright 測試：

測試的同時，也能看見 Docker Desktop 有 container 在運作，這代表我們的測試確實在容器內執行：

測試結束後，container 同時刪除，這是因為我們有加上 --rm，跑完測試後便自動回收容器，能保持環境乾淨不殘留，避免環境因為遺留的 container 變得髒亂。

查看在 Docker Container 內測試執行的結果

不論是用 docker run 起 Docker 環境，或是使用 Dockerfile build 出自己的 image 來執行測試，由於測試是在 Docker 的隔離環境內執行，因此在本地環境並沒有產出測試結果 - 測試報告、截圖、影片...等等，如果想要查看測試結果，我們可以將測試結果複製出來查看：

docker cp <host_path> <container_id>:<container_path>

💡 Tips：
複製檔案時，務必要在容器外執行指令，否則無法成功執行指令。

到這裡，我們已經學會如何透過 Dockerfile 打造一個高度一致性且易於管理的測試環境，接下來，我們要談談 CI/CD 以及 Docker 環境之中的 headless 模式 問題，以及如何解決，讓我們在不同環境下都能夠收獲相同的測試結果，就像上場衝鋒陷陣之前，有穩固的基礎作為後盾，為後續挑戰做好準備。